<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
  <tr>
    <th>
      <label>From</label>
    </th>
    <th colspan="2">
      <label>To</label>
    </th>
  </tr>

  <tr
    ng-repeat="range in agg.params.ranges track by $index">
    <td>
      <input
        ng-model="range.from"
        type="number"
        class="form-control"
        name="range.from"
        step="any" />
    </td>
    <td>
      <input
        ng-model="range.to"
        type="number"
        class="form-control"
        name="range.to"
        step="any" />
    </td>
    <td>
      <button
        type="button"
        ng-click="agg.params.ranges.splice($index, 1)"
        class="btn btn-danger btn-xs">
        <i class="fa fa-times"></i>
      </button>
    </td>
  </tr>
</table>

<input ng-model="agg.params.ranges.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
<div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
  <p>
    <i class="fa fa-danger text-danger"></i>
    <strong>Required:</strong> You must specify at least one range.
  </p>
</div>

<div
  ng-click="agg.params.ranges.push({})"
  class="sidebar-item-button primary">
  Add Range
</div>